{% extends 'base.html' %}
{% load humanize %}
{% block page-content %}
{% include 'nav_cat_bar.html' %}
{% load custom_tag %}
{% load mytags %}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
            <div class="ibox-title">
            <h5>资产详细信息</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-wrench"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="#">未启用 1</a>
                            </li>
                            <li><a href="#">未启用 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
        </div>

    <div class="ibox-content">
    <div>
        {% if error %}
            <div class="alert alert-warning text-center">资产不存在</div>
        {% endif %}
    </div>
	<div class="tab-base">

    <!--Nav Tabs-->
    <ul class="nav nav-tabs">
        <li class="active">
            <a data-toggle="tab" href="#tab-asset-info" aria-expanded="true">资产信息</a>
        </li>
        <li class="">
            <a data-toggle="tab" href="#tab-hardware-info" aria-expanded="false">硬件</a>
        </li>
        <li class="">
            <a data-toggle="tab" href="#tab-software-info" aria-expanded="false">软件</a>
        </li>
        <li class="">
            <a data-toggle="tab" href="#tab-event-record" aria-expanded="false">变更纪录</a>
        </li>
        <!--
        <li class="">
            <a data-toggle="tab" href="#tab-flow-record" aria-expanded="false">流程纪录</a>
        </li>
        <li class="">
            <a data-toggle="tab" href="#tab-contract-info" aria-expanded="false">合同/财务</a>
        </li>
        <li class="">
            <a data-toggle="tab" href="#tab-config" aria-expanded="false">配置</a>
        </li>
        -->
    </ul>

    <!--Tabs Content-->
    <div class="tab-content">
        <div id="tab-asset-info" class="tab-pane fade active in">
           <h3>Assets Info</h3>
           <table class="table table-bordered table-hover asset-info-table">
               <tr>
                   <td class="col-md-2 bold">资产类型</td>
                   <td class="col-md-4">{{ asset_obj.get_asset_type_display }}</td>
                   <td class="col-md-2 bold">所属业务线</td>
                   <td class="col-md-4">{{ asset_obj.project }}</td>
               </tr>
               <tr>
                   <td class="col-md-2 bold">IDC</td>
                   <td class="col-md-4">{{ asset_obj.idc }}</td>
                   <td class="col-md-2 bold">SN</td>
                   <td class="col-md-4">{{ asset_obj.sn }}</td>
               </tr>
               <tr>
                   <td class="col-md-2 bold">公网IP</td>
                   <td class="col-md-4">{{ asset_obj.p_ip }}</td>
                   <td class="col-md-2 bold">MAC Address</td>
                   <td class="col-md-4">{{ asset_obj.mac }}</td>
               </tr>
               <tr>
                   <td class="col-md-2 bold">主机名称</td>
                   <td class="col-md-4">{{ asset_obj.host_name }}</td>
                   <td class="col-md-2 bold">所有IPv4地址</td>
                   <td class="col-md-4">
                       {% for ip in other_ip %}
                           {{ip}}&nbsp;
                       {% endfor %}
                   </td>
               </tr>
               <tr>
                   <td class="col-md-2 bold">OS Kernel </td>
                   <td class="col-md-4">{{ asset_obj.os_kernel }} </td>
                   <td class="col-md-2 bold">OS Release Version</td>
                   <td class="col-md-4">{{ asset_obj.system_version}}</td>
               </tr>
               <tr>
                   <td class="col-md-2 bold">系统平台</td>
                   <td class="col-md-4">{{ asset_obj.system_arch}}</td>
                   <td class="col-md-2 bold">厂商型号</td>
                   <td class="col-md-4">{{ asset_obj.server_type }}</td>
               </tr>
               <tr>
                   <td class="col-md-2 bold">CPU型号</td>
                   <td class="col-md-4">{{ asset_obj.cpu_type }}</td>
                   <td class="col-md-2 bold">CPU颗数</td>
                   <td class="col-md-4">{{ asset_obj.cpu_core }}</td>
               </tr>
               <tr>
                   <td class="col-md-2 bold">总内存(MB)</td>
                   <td class="col-md-4">{{ asset_obj.memory }}</td>
                   <td class="col-md-2 bold">CPU核数</td>
                   <td class="col-md-4">{{ asset_obj.cpu_total }}</td>
               </tr>
               <tr>
                   <td class="col-md-2 bold">硬盘信息(GB)</td>
                   <td class="col-md-4">
                       {% for k,v in disk_info.items %}
                           <p><span>磁盘：{{ k }}</span>  <span style="float: right;display: block;width: 200px;">容量: {{ v }}GB</span></p>
                       {% endfor %}
                   </td>
                   <td class="col-md-2 bold">挂载分区(GB)</td>
                   <td class="col-md-4">
                       {% for disk in disk_mount %}
                           <p><span>{% for k,v in disk.items %}
                               {% if k == "mount" %}
                                   [{{ v }}]:
                               {% else %}
                                   {{ v }}GB
                               {% endif %}
                           {% endfor %}</p>
                       {% endfor %}
                   </td>
               </tr>
               <tr>
                   <td class="col-md-2 bold">状态</td>
                   <td class="col-md-4">
                       <span class="badge badge-success">{{ asset_obj.get_status_display }}</span>
                   </td>
                   <td class="col-md-2 bold">管理员</td>
                   <td class="col-md-4">{{ asset_obj.admin }}</td>
               </tr>
               <tr>
                   <td class="col-md-2 bold">资产创建日期</td>
                   <td class="col-md-4"> {{ asset_obj.create_date}}</td>
                   <td class="col-md-2 bold">最近更新日期</td>
                   <td class="col-md-4">{{ asset_obj.update_date }}</td>
               </tr>
           </table>




        </div>
        <div id="tab-hardware-info" class="tab-pane fade">

           <table class="table table-bordered table-hover asset-info-table">
               <h3>Server Info</h3>
               <tr>
                   <td class="col-md-2 bold">Name</td>
                   <td class="col-md-4">{{ asset_obj.host_name }}</td>
                   <td class="col-md-2 bold">Model</td>
                   <td class="col-md-4">{{ asset_obj.server_type }}</td>
               </tr>
               <tr>
                   <td class="col-md-2 bold">SN</td>
                   <td class="col-md-4">{{ asset_obj.sn }}</td>
                   <td class="col-md-2 bold">OS Version</td>
                   <td class="col-md-4">{{ asset_obj.system_version }}</td>
               </tr>
           </table>
           <hr/>
           <table class="table table-bordered table-hover asset-info-table">
               <h3>CPU And Memory Info</h3>
               <tr>
                   <td class="col-md-2 bold">CPU型号</td>
                   <td class="col-md-4">{{ asset_obj.cpu_type }}</td>
                   <td class="col-md-2 bold">物理CPU个数</td>
                   <td class="col-md-4">{{ asset_obj.cpu_core }}</td>
               </tr>
               <tr>
                   <td class="col-md-2 bold">CPU核数</td>
                   <td class="col-md-4">{{ asset_obj.cpu_total }}</td>
                   <td class="col-md-2 bold">总内存大小(MB)</td>
                   <td class="col-md-4">{{ asset_obj.memory }}GB</td>
               </tr>
           </table>
           <hr/>

           <table class="table table-bordered table-hover asset-info-table">
               <h3>Disk Info</h3>
               <tr>
                   <td class="col-md-2 bold">总硬盘大小(GB)</td>
                   <td class="col-md-4">{{ disk_total }}</td>
                   <td class="col-md-2 bold">硬盘块数</td>
                   <td class="col-md-4">{{ disk_count }}</td>
               </tr>
           </table>

           <hr/>
            <table class="table table-bordered table-hover asset-info-table">
               <h3>NetWork Info</h3>
               <tr>
                   <td class="col-md-2 bold">公网地址</td>
                   <td class="col-md-4">{{ asset_obj.p_ip }}</td>
                   <td class="col-md-2 bold">Mac Address</td>
                   <td class="col-md-4">{{ asset_obj.mac }}</td>
               </tr>
           </table>





        </div>
        <div id="tab-software-info" class="tab-pane fade">
            <h4 class="text-thin">software</h4>
            <p>也许有用，先留着日后补充</p>
            <!--<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>-->
        </div>
        <div id="tab-event-record" class="panel-body table-responsive tab-pane fade">
            <table id="event_log_list_new" class="table table-striped table-bordered table-hover dataTables-example">
            <thead >
                <tr>
                    <th>事件ID</th>
                    <th>事件类型</th>
                    <th>日志</th>
                    <th>涉及对象</th>
                    <th>变更详情</th>
                    <th>事件触发用户</th>
                    <th>日期</th>
               </tr>
            </thead>
            <tbody>
                {% for log in log_list %}
                <tr class="text-center" >
                    <td data-editable='false'>{{log.id}}</td>
                    <td data-editable='false'>{{log.log_type}}</td>
                    <td data-editable='false'>{{log.log}}</td>
                    <td data-editable='false'>{{log.p_ip}}</td>
                    <td><a data-toggle="modal" data-target="#display_result_{{log.id}}">查看详细信息情</a></td>
                    <td data-editable='false'>{{log.operator}}</td>
                    <td data-editable='false'>{{log.log_time|print_time}}</td>
                </tr>
            <div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" id="display_result_{{log.id}}">
              <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel" align="center">{{ log.p_ip }}变更详情</h4>
                  </div>
                  <div class="modal-body">
                    <div class="container-fluid" align="pull-left">
                        <pre style="white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;">{{ log.result }}</pre>
                    </div>
                  </div>
                </div><!-- /.modal-content -->
              </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
                {% endfor %}
            </tbody>
            </table>
        </div>

        <div id="tab-flow-record" class="tab-pane fade">
            <h4 class="text-thin">flow</h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        </div>
        <div id="tab-contract-info" class="tab-pane fade">


           <table class=" asset-info-table">
               <h3></h3>
               <tr>
                   <td class="col-md-2 bold">价格(RMB)</td>
                   <td class="col-md-4">{{ asset_obj.price }}</td>
                   <td class="col-md-2 bold">购买日期</td>
                   <td class="col-md-4">{{ asset_obj.trade_date }}</td>
               </tr>
               <tr>
                   <td class="col-md-2 bold">过保日期</td>
                   <td class="col-md-4">{{ asset_obj.expire_date}}</td>
                   <td class="col-md-2 bold">所属合同</td>
                   <td class="col-md-4">{{ asset_obj.contract }}</td>
               </tr>
           </table>


        </div>
        <div id="tab-config" class="tab-pane fade">
            <h4 class="text-thin"><a class="btn-link" href="/admin/assets/asset/{{ asset_obj.id }}/" target="_blank">配置</a></h4>
            <p>只有管理管理员有权限修改资产信息.</p>
        </div>
    </div>
</div>
</div>
</div>
</div>
</div>
</div>

<link href="/static/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
<link href="/static/css/plugins/dataTables/dataTables.responsive.css" rel="stylesheet">
<link href="/static/css/plugins/dataTables/dataTables.tableTools.min.css" rel="stylesheet">

<script src="/static/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="/static/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="/static/js/plugins/dataTables/dataTables.responsive.js"></script>
<script src="/static/js/plugins/dataTables/dataTables.tableTools.min.js"></script>


<script type="text/javascript">

    $(document).ready(function(){

            var active_node = $("#mainnav-menu a[href='"+ "{% url 'asset_list' %}" +"']");
            active_node.parent().addClass("active-link");
            if (active_node.parent().parent().hasClass("collapse")){
                active_node.parent().parent().addClass("in");
            }

            $('#event_log_list').DataTable( {

                initComplete: function () {
                    this.api().columns().every( function () {
                        var column = this;
                        var select = $('<select><option value=""></option></select>')
                            .appendTo( $(column.footer()).empty() )
                            .on( 'change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );

                                column
                                    .search( val ? '^'+val+'$' : '', true, false )
                                    .draw();
                            } );

                        column.data().unique().sort().each( function ( d, j ) {
                            select.append( '<option value="'+d+'">'+d+'</option>' )
                        } );
                    } );
                },


            } ); //end datatables
    });//end doc ready

    $(document).ready(function() {
        $('.dataTables-example').dataTable({
            responsive: true,
            "dom": 'T<"clear">lfrtip',
            "tableTools": {
            "sSwfPath": "/static/js/plugins/dataTables/swf/copy_csv_xls_pdf.swf"
            }
       });
    });
</script>


{% endblock %}
